<template>
	<div class="search_result_list">
		<span v-if="searchResultList.length<=0" class="no_result">等待搜索 或 暂无结果...</span>
		<ul>
			<li v-for="(item, index) in searchResultList">
				<router-link :to="{name:'news-detail', params:{cname:cname, cid:cid, id:item.id, datetime:item.time}}">
					<h1>{{item.title | filterHtml}}</h1>
					<p>{{item.time}}</p>
				</router-link>
			</li>
		</ul>
		<a @click="moreSearchResult($event)" v-if="searchResultList.length>0 && pgnum <= 3" class="more_search_result">查看更多结果</a>
	</div>
</template>

<script>
	export default {
		name: "SearchResultList",
		props:["searchResultList","pgnum"],
		data: function(){
			return{
				cname:encodeURIComponent('新闻'),
				cid:1
			}
		},
		filters: {
			filterHtml:function(value){
				value = value.replace(/<[^<>]+>/gim, "").replace(/('|"|\.|<|>)/gim, "\\$1")
				return value;
			},
			dateFormat:function(value){
				return dateFormat(value)
			}
		},
		methods:{
			moreSearchResult(e){
				this.$emit("searchMoreCommunications", "")
			}
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	.search_result_list{
		min-height: 650/@base;
		background-color: #fff;
		margin-top:10/@base;
		padding:10/@base 0;
		span{
			&.no_result{
				padding:20/@base;
				margin:0 auto;
				text-align: center;
				display: block;
				color:#ccc;
			}
		}
		ul{
			li{
				background-color: #fff;
				margin:10/@base auto;
				padding:10/@base 20/@base;
				border-bottom: 1/@base solid #efefef;
				overflow: hidden;
				&:last-child{
					border:0;
				}
				a{
					color:#000;
					h1{
						font-size:24/@base;
						overflow: hidden;
						padding:0 0 20/@base 0;
						font-weight: 400;
					}
					p{
						font-size: 14/@base;
						color:#999;
					}
				}
			}
		}
		a{
			&.more_search_result{
				width:100%;
				display:block;
				padding:20/@base 0;
				font-size:20/@base;
				text-align: center;
				background-color: #fff;
				margin:10/@base 0;
				color:#999;
			}
		}
	}
</style>
